<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>淘宝选女友</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        ul,
        ol {
            list-style: none
        }
        
        h3 {
            height: 40px
        }
        
        button:disabled {
            cursor: not-allowed;
        }
        
        .shopping {
            width: 570px;
            margin: 100px auto;
            padding: 20px;
            border: 1px solid #ccc;
            position: relative;
            overflow: hidden;
        }
        
        .shopping .left {
            float: left;
        }
        
        .shopping .right {
            float: right;
        }
        
        .shopping .girlImg {
            position: relative;
            width: 200px;
            height: 200px;
            cursor: move
        }
        
        .shopping .girlImg img {
            width: 100%;
            height: 100%
        }
        
        .shopping .girlImg span {
            display: none;
            width: 100px;
            height: 100px;
            position: absolute;
            background: rgba(255, 255, 0, 0.3);
            left: 0;
            top: 0;
        }
        
        .imgList {
            width: 220px;
            margin-top: 20px;
        }
        
        .imgList li {
            float: left;
            margin-right: 8px;
            border: 2px solid transparent
        }
        
        .imgList .ac {
            border: 2px solid red
        }
        
        .imgList li img {
            width: 40px;
            display: block
        }
        
        .price {
            height: 50px;
            font-size: 30px;
            color: red;
            font-weight: bold
        }
        
        .priceList {
            overflow: hidden;
            margin: 20px 0
        }
        
        .priceList li {
            float: left;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            border: 2px solid #999;
            margin-right: 10px;
            cursor: pointer
        }
        
        .priceList .ac {
            border: 2px solid red
        }
        
        .changeNum {
            position: relative;
            margin: 20px 0
        }
        
        .changeNum input {
            width: 40px;
            height: 41px;
            text-align: center;
            line-height: 40px;
            border: 1px solid #ccc;
        }
        
        .changeNum button {
            height: 22px;
            width: 20px;
            background: none;
            border: 1px solid #ccc;
            position: absolute;
        }
        
        .changeNum .addBtn {
            left: 41px;
            top: 0px;
        }
        
        .changeNum .subBtn {
            left: 41px;
            top: 21px;
        }
        
        .okBtn {
            height: 30px;
            width: 100px
        }
        
        .bigBox {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 230px;
            display: none;
            overflow: hidden;
        }
        
        .bigBox img {
            position: absolute;
        }
        
        .shopCart {
            position: fixed;
            right: 0;
            top: 200px;
            color: red;
        }
        
        .shopNum {
            width: 60px;
            height: 25px;
            background: deeppink;
            color: black;
            text-align: center;
            line-height: 25px;
        }
        
        .active {
            width: 25px;
            height: 25px;
            background: skyblue;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="shopping" id="shopping">
        <div class="left">
            <div class="girlImg" id="box">
                <img id="girl" src="4.jpeg">
                <span></span>
            </div>
            <ol id="imgList" class="imgList">
                <li><img src="0.jpg"></li>
                <li><img src="1.jpg"></li>
                <li><img src="2.jpg"></li>
                <li><img src="3.jpg"></li>
            </ol>
        </div>
        <div class="right">
            <h3>淘宝选女友---不要998,女友带回家!!</h3>
            <div id="price" class="price"><em>480-99988</em> 元</div>
            <ul id="priceList" class="priceList">
                <li>标准版</li>
                <li>升级版</li>
                <li>豪华版</li>
                <li>定制版</li>
            </ul>
            <div id="changeNum" class="changeNum">
                <input type="text" value="1">
                <button class="addBtn" type="button">+</button>
                <button class="subBtn" type="button" disabled>-</button>
            </div>
            <button id="okBtn" class="okBtn" type="button" disabled>加入购物车</button>
        </div>
        <div id="bigBox" class="bigBox"><img src="4.jpeg" alt=""></div>
    </div>
    <div id="shopCart" class="shopCart">
        购物车
        <p id="shopNum" class="shopNum">0</p>
    </div>
    <script>
        window.onload = function() {
            var shopping = document.querySelector('#shopping');
            var girlimg = document.querySelector('.girlImg img');
            var box = document.querySelector('#box')
            var girlspan = document.querySelector('.girlImg span');
            var imglist = document.querySelector('#imgList');
            var imgs = imglist.querySelectorAll('img')
            var price = document.querySelector('.right .price');
            var lists = document.querySelectorAll('#priceList li');
            var addbtn = document.querySelector('.addBtn');
            var subbtn = document.querySelector('.subBtn');
            var okbtn = document.querySelector('#okBtn')
            var shopcar = document.querySelector('#shopCart');
            var shopnum = document.querySelector('#shopNum');
            var bigbox = document.querySelector('#bigBox');
            var bigimg = document.querySelector('#bigBox img');
            var text = document.querySelector('#changeNum input');
            var index = 0;
            var lastindex = 0;
            var pd1 = 0;
            var pd = 0;
            // 点击小图，切换大图
            imgs.forEach((img, i) => {
                    img.onclick = () => {
                        lastindex = index
                        index = i
                        pd1++
                        girlimg.src = `${i}.jpg`
                        bigimg.src = `${i}.jpg`
                        if (i == 0) {
                            price.innerHTML = '480元'
                        }
                        if (i == 1) {
                            price.innerHTML = '30000元'
                        }
                        if (i == 2) {
                            price.innerHTML = '60000元'
                        }
                        if (i == 3) {
                            price.innerHTML = '99988元'
                        }
                        // remove(lastindex, index)
                        if (pd1 > 0) {
                            console.log(1)
                            okbtn.removeAttribute('disabled')
                        }
                    }
                })
                // 放大镜
            function remove(lastindex, index) {
                imgs[lastindex].classList.remove('ac')
                imgs[index].classList.add('ac')
                lists[lastindex].classList.remove('ac')
                lists[index].classList.add('ac')
            }
            // 鼠标进入
            box.onmouseenter = function(e) {
                    girlspan.style.display = 'block'
                    bigbox.style.display = 'block'
                }
                // 鼠标离开
            box.onmouseleave = function() {
                    girlspan.style.display = 'none'
                    bigbox.style.display = 'none'
                }
                //放大镜效果，原图，和点击图比例
            box.onmousemove = function(e) {
                    let left = e.pageX - shopping.offsetLeft - box.offsetLeft - girlspan.offsetWidth / 2,
                        top = e.pageY - shopping.offsetTop - box.offsetTop - girlspan.offsetHeight / 2
                    if (left < 0) left = 0
                    if (left >= box.clientWidth - girlspan.offsetWidth) {
                        left = box.clientWidth - girlspan.offsetWidth
                    }
                    if (top < 0) top = 0
                    if (top >= box.clientHeight - girlspan.offsetHeight) {
                        top = box.clientHeight - girlspan.offsetHeight
                    }
                    girlspan.style.left = left + 'px'
                    girlspan.style.top = top + 'px'
                    if (pd1 != 0 || pd != 0) {
                        bigimg.style.left = -2 * left + 'px'
                        bigimg.style.top = -2 * top + 'px'
                    } else {
                        bigimg.style.left = -4.5 * left + 'px'
                        bigimg.style.top = -4.5 * top + 'px'
                    }
                }
                // okbtn.onclick = function(e) {
                //     var x1 = e.clientX,
                //         y1 = e.clientY,
                //         x2 = shopcar.offsetLeft,
                //         y2 = shopcar.offsetTop,
                //         x3 = x2 - 200,
                //         y3 = 50
                //         // 根据公式来计算一元二次方程里的三个系数
                //     a = -((y2 - y3) * x1 - (x2 - x3) * y1 + x2 * y3 - x3 * y2) / ((x2 - x3) * (x1 - x2) * (x1 - x3));
                //     b = ((y2 - y3) * x1 * x1 + x2 * x2 * y3 - x3 * x3 * y2 - (x2 * x2 - x3 * x3) * y1) / ((x2 - x3) * (x1 - x2) * (
                //         x1 - x3));
                //     c = ((x2 * y3 - x3 * y2) * x1 * x1 - (x2 * x2 * y3 - x3 * x3 * y2) * x1 + (x2 * x2 * x3 - x2 * x3 * x3) * y1) /
                //         ((x2 - x3) * (x1 - x2) * (x1 - x3));

            //     fly(x1, x2);

            //     function fly(start, end) {
            //         var div = document.createElement('div');
            //         div.className = 'active';
            //         document.body.appendChild(div);
            //         var timer = setInterval(function() {
            //             var top = a * start * start + b * start + c;
            //             div.style.left = start + 'px';
            //             div.style.top = top + 'px';
            //             start += 10;
            //             if (start >= end) {
            //                 clearInterval(timer);
            //                 document.body.removeChild(div);
            //                 shopnum.innerHTML = Number(this.shopnum.innerHTML) + n; // 改变购物车的值
            //             }
            //         }, 20)
            //     }

            // }

            //加减
            addbtn.onclick = function() {
                var n = Number(text.value)
                n++
                subbtn.removeAttribute('disabled')
                text.value = n
                if (n == 5) {
                    alert('不要买了')
                    addbtn.setAttribute('disabled', '')
                    n--
                    text.value = n
                }
            }
            subbtn.onclick = function() {
                    var n = Number(text.value)
                    n--
                    text.value = n
                    addbtn.removeAttribute('disabled')
                    if (n == 0) {
                        alert("必须买")
                        subbtn.setAttribute('disabled', '')
                        n++
                        text.value = n
                    }
                }
                // 选择定制的版本
            var j = 0
            lists.forEach((list, i) => {
                list.onclick = () => {
                    lastindex = index
                    index = i
                    remove(lastindex, index)
                    girlimg.src = `${i}.jpg`
                    bigimg.src = `${i}.jpg`
                    if (i == 0) {
                        price.innerHTML = '480元'
                    }
                    if (i == 1) {
                        price.innerHTML = '1760元'
                    }
                    if (i == 2) {
                        price.innerHTML = '5850元'
                    }
                    if (i == 3) {
                        price.innerHTML = '99988元'
                    }
                    j++
                    if (j > 0) {
                        okbtn.removeAttribute('disabled')
                    }
                }
            })
            okbtn.onclick = function(e) {
                var x1 = e.clientX,
                    y1 = e.clientY,
                    x2 = shopcar.offsetLeft,
                    y2 = shopcar.offsetTop,
                    x3 = x2 - 200,
                    y3 = 50
                    // 根据公式来计算一元二次方程里的三个系数
                a = -((y2 - y3) * x1 - (x2 - x3) * y1 + x2 * y3 - x3 * y2) / ((x2 - x3) * (x1 - x2) * (x1 - x3));
                b = ((y2 - y3) * x1 * x1 + x2 * x2 * y3 - x3 * x3 * y2 - (x2 * x2 - x3 * x3) * y1) / ((x2 - x3) * (x1 - x2) * (
                    x1 - x3));
                c = ((x2 * y3 - x3 * y2) * x1 * x1 - (x2 * x2 * y3 - x3 * x3 * y2) * x1 + (x2 * x2 * x3 - x2 * x3 * x3) * y1) /
                    ((x2 - x3) * (x1 - x2) * (x1 - x3));

                fly(x1, x2);

                function fly(start, end) {
                    var div = document.createElement('div');

                    document.body.appendChild(div);
                    var timer = setInterval(function() {
                        start += 10;
                        var top = a * start * start + b * start + c;
                        div.style.left = start + 'px';
                        div.style.top = top + 'px';
                        div.className = 'active';
                        if (start >= end) {
                            clearInterval(timer);
                            document.body.removeChild(div);
                            shopnum.innerHTML = Number(shopnum.innerHTML) + Number(text.value); // 改变购物车的值
                        }
                    }, 20)
                }

            }
        }
    </script>
</body>

</html>